<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选</title>
    <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/details.css">
</head>

<body>
    <header class="header">
        <div class="wrap">
            <div class="log">
                <a href="#">
                    <img src="../src/images/log.png" alt="" class="log-pic">
                    <div class="log_desc">
                        <h2 class="log-title">熊猫优选</h2>
                        <span class="log-info">XIONG MAO YOU XUAN</span>
                    </div>
                </a>
            </div>
            <div class="search">
                <input type="text" name="search" placeholder="搜索商品，发现更多优惠" class="search_input">
                <span class="btn-search">搜索</span>
            </div>
            <div class="advantage">
                <ul class="advantage-list">
                    <li class="advantage-item">
                        <img src="../src/images/head_exemption.png" alt="">
                        <span class="advantage-info">全程包邮</span>
                    </li>
                    <li class="advantage-item">
                        <img src="../src/images/head_exchange.png" alt="">
                        <span class="advantage-info">7天包退</span>
                    </li>
                    <li class="advantage-item">
                        <img src="../src/images/head_quality.png" alt="">
                        <span class="advantage-info">凭证保证</span>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <nav class="nav">
        <ul class="nav-list wrap">
            <li class="list-item active" data-hash="#tab1">首页</li>
        </ul>
    </nav>

    <div class="back-top" id="back_top">
        <img src="../src/images/moveTOP.png" alt="">
    </div>
    <footer>
        <div class="wrap footer">
            <div class="foot-container">
                <div class="foot_log">
                    <img src="../src/images/log.png" alt="">
                    <div class="foot_log_desc">
                        <h3 class="foot_log_title">熊猫优选</h3>
                        <p class="foot_log_text">年轻人网购首选</p>
                        <p class="foot_log_text">购物领券更省钱</p>
                    </div>
                </div>
                <div class="app">
                    下载APP
                </div>
            </div>
            <div class="foot-info">
                <img src="../src/images/foot_policeIcon.png" alt="">
                <p class="foot-desc">
                    浙公安网备案 33010602009949号 | 增值电信业务经营许可证：浙B2-20160363 |
                    ICP备案号:浙ICP备17012864号-1
                </p>
            </div>
        </div>
        <div class="pagefoot">
            <img src="../src/images/foot_pagefoot.png" alt="">
        </div>
    </footer>
    <script type="text/html" id="detail">
            <div class="main">
                <div class="head wrap">
                    <div class="details">
                        <div class="photos">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <!-- <div class="swiper-slide">Slide 1</div> -->
                                    {{each banner}}
                                        <div class="swiper-slide">
                                            <img src="{{$value}}" alt="">
                                        </div>
                                    {{/each}}
                                </div>
                                <!-- 如果需要分页器 -->
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                        <div class="desc">
                            <div class="title">
                                <img src="../src/images/detail_tmall.png" alt="">
                                <img src="../src/images/detail_Pinkage.png" alt="">
                                <h1 class="title-desc">
                                   {{detail.title}}
                                </h1>
                            </div>
                            <div class="info">
                                <p class="original-price">原价¥{{detail.originPrice}}</p>
                                <div class="last-price">
                                    <div claprice>
                                        <span class="coupon">券后价:</span>
                                        <span class="symbol">￥</span>
                                        <span class="cost">{{detail.price}}</span>
                                        <span class="coupon-info">{{detail.coupon}}</span>
                                    </div>
                                    <p class="People">{{detail.saleNum}}人已买</p>
                                </div>
                            </div>
                            <p class="time">优惠有效期：{{couponTime}}</p>
                            <div class="btn">
                                <button class="goTB-btn">领券购买
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="shop">
                        <div class="content">
                            <span class="line"></span>
                            <span class="text">卖家信息</span>
                            <span class="line"></span>
                        </div>
                        <img src="{{shop.shopLogo}}" alt="">
                        <p class="shop-name">{{shop.shopName}}</p>
                        <ul class="character">
                            <li class="character-item">
                                <p class="describe">描述</p>
                                <p class="score">{{shop.deliveryScore}}</p>
                            </li>
                            <li class="character-item">
                                <p class="describe">服务</p>
                                <p class="score">{{shop.itemScore}}</p>
                            </li>
                            <li class="character-item">
                                <p class="describe">物流</p>
                                <p class="score">{{shop.serviceScore}}</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="cmd-detail wrap">
                    <div class="imags">
                        {{each descContentList}}
                            <img src="{{$value}}" alt="">
                        {{/each}}
                    </div>
                </div>
            </div>
    </script>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/swiper/swiper-bundle.min.js"></script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="../src/js/detail.js"></script>
</body>

</html>